<template>
  <uv-popup
    ref="popup"
    mode="center"
    :round="20"
    :close-on-click-overlay="false"
    bg-color="transparent"
    @change="onPopupChange"
  >
    <view class="email-popup-container">
      <!-- 标题 -->
      <view class="popup-header">
        <text class="popup-title">请输入邮箱</text>
      </view>

      <!-- 输入框 -->
      <view class="popup-content">
        <input
          class="email-input"
          type="text"
          v-model="emailValue"
          placeholder="请输入邮箱地址"
          placeholder-style="color: #999"
          @confirm="handleConfirm"
        />
        <text v-if="errorMsg" class="error-msg">{{ errorMsg }}</text>
      </view>

      <!-- 按钮 -->
      <view class="popup-footer">
        <view class="cancel-btn" @click="handleCancel">
          <text class="cancel-text">取消</text>
        </view>
        <view class="confirm-btn" @click="handleConfirm">
          <text class="confirm-text">确定</text>
        </view>
      </view>
    </view>
  </uv-popup>
</template>

<script>
export default {
  name: 'EmailInputPopup',
  data() {
    return {
      emailValue: '',
      errorMsg: ''
    }
  },
  methods: {
    /**
     * 弹窗状态变化
     */
    onPopupChange(e) {
      console.log('email popup change:', e)
    },

    /**
     * 打开弹窗
     */
    open() {
      this.emailValue = ''
      this.errorMsg = ''
      this.$refs.popup?.open()
    },

    /**
     * 关闭弹窗
     */
    close() {
      this.$refs.popup?.close()
    },

    /**
     * 验证邮箱格式
     */
    validateEmail(email) {
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
      return emailRegex.test(email)
    },

    /**
     * 确认
     */
    handleConfirm() {
      const email = this.emailValue.trim()

      // 验证邮箱
      if (!email) {
        this.errorMsg = '请输入邮箱地址'
        return
      }

      if (!this.validateEmail(email)) {
        this.errorMsg = '邮箱格式不正确'
        return
      }

      // 清除错误信息
      this.errorMsg = ''

      // 触发确认事件
      this.$emit('confirm', email)

      // 关闭弹窗
      this.close()
    },

    /**
     * 取消
     */
    handleCancel() {
      this.$emit('cancel')
      this.close()
    }
  }
}
</script>

<style lang="scss" scoped>
.email-popup-container {
  width: 600rpx;
  background: #fff;
  border-radius: 20rpx;
  overflow: hidden;
}

// 标题
.popup-header {
  padding: 40rpx 32rpx 24rpx;
  text-align: center;

  .popup-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
  }
}

// 内容
.popup-content {
  padding: 0 32rpx 32rpx;

  .email-input {
    width: 100%;
    height: 88rpx;
    padding: 0 24rpx;
    font-size: 28rpx;
    color: #333;
    background: #f8f9fa;
    border: 2rpx solid #e8eaed;
    border-radius: 12rpx;
    transition: all 0.3s ease;

    &:focus {
      background: #fff;
      border-color: #06CBB6;
    }
  }

  .error-msg {
    display: block;
    margin-top: 12rpx;
    font-size: 24rpx;
    color: #ff4d4f;
  }
}

// 底部按钮
.popup-footer {
  display: flex;
  border-top: 1rpx solid #f0f0f0;

  .cancel-btn,
  .confirm-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 96rpx;
    cursor: pointer;
    transition: all 0.2s ease;

    &:active {
      opacity: 0.6;
    }
  }

  .cancel-btn {
    border-right: 1rpx solid #f0f0f0;

    .cancel-text {
      font-size: 30rpx;
      color: #999;
    }
  }

  .confirm-btn {
    .confirm-text {
      font-size: 30rpx;
      font-weight: 600;
      color: #06CBB6;
    }
  }
}
</style>

